<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Geolocation Components Demo - zoom effect</title>
<script charset="utf-8"
	src="http://map.qq.com/api/js?v=2.exp&libraries=convertor"></script>
<meta name="viewport"
	content="width=device-width,initial-scale=1,
    minimum-scale=1,maximum-scale=1,user-scalable=no">
<style>
* {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	position: absolute;
	width: 100%;
	height: 100%;
}

#geoPage, #markPage {
	position: relative;
}

#container {
	min-width: 600px;
	min-height: 767px;
}
</style>
</head>
<body>
	<!--  通过 iframe 嵌入前端定位组件，此处没有隐藏定位组件，使用了定位组件的在定位中视觉特效  -->
	<iframe id="geoPage" width="100%" height="30%" frameborder=0
		scrolling="no"
		src="http://apis.map.qq.com/tools/geolocation?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp&effect=zoom"></iframe>
	<div id="container"></div>
	<script type="text/JavaScript">
		var loc;
		var isMapInit = false;
		var map;
		var marker;
		//监听定位组件的message事件
		window.addEventListener('message', function(event) {
			loc = event.data; // 接收位置信息
			console.log('location', loc);

			/*  if(loc) { //定位成功
			     var markUrl = 'http://apis.map.qq.com/tools/poimarker' +
			     '?marker=coord:' + loc.lat + ',' + loc.lng + 
			     ';title:我的位置;addr:' + (loc.addr || loc.city) + 
			     '&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp';
			     //给位置展示组件赋值
			     document.getElementById('markPage').src = markUrl;
			 } else { //定位组件在定位失败后，也会触发message, event.data为null
			     alert('定位失败'); 
			 } */

			//另一个使用方式 
			if (!isMapInit && loc) { //首次定位成功，创建地图
				isMapInit = true;
				map = new qq.maps.Map(document.getElementById("container"), {
					center : new qq.maps.LatLng(loc.lat, loc.lng),
					zoom : 13
				});
				marker = new qq.maps.Marker({
					map : map,
					position : new qq.maps.LatLng(loc.lat, loc.lng)
				});
			} else if (loc) { //地图已经创建，再收到新的位置信息后更新地图中心点
				marker.setPosition(new qq.maps.LatLng(loc.lat, loc.lng));
				 map.panTo(new qq.maps.LatLng(loc.lat, loc.lng));
			}

		}, false);
		//为防止定位组件在message事件监听前已经触发定位成功事件，在此处显示请求一次位置信息
		document.getElementById("geoPage").contentWindow.postMessage(
				'getLocation', '*');

		//设置6s超时，防止定位组件长时间获取位置信息未响应
		setTimeout(function() {
			if (!loc) {
				//主动与前端定位组件通信（可选），获取粗糙的IP定位结果
				document.getElementById("geoPage").contentWindow.postMessage(
						'getLocation.robust', '*');
			}
		}, 6000); //6s为推荐值，业务调用方可根据自己的需求设置改时间，不建议太短
	</script>

	<!-- 接收到位置信息后 通过 iframe 嵌入位置标注组件 -->
	<!--  <iframe id="markPage" width="100%" height="70%" frameborder=0 scrolling="no" src=""></iframe>  -->
</body>
</html>